<template>
  <div>
    <router-view></router-view>
    <div v-if="$route.name === '话题内容'">
      <el-dialog
        title="添加话题"
        :visible.sync="dialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <el-form
          :hide-required-asterisk="true"
          :status-icon="true"
          ref="ruleForm"
        >
          <el-radio v-model="radio" label="0">可读</el-radio>
          <el-radio v-model="radio" label="1">不可读</el-radio>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="changeStatus()" size="mini"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <div class="topicCon">
        <el-page-header @back="goBack" content="话题" class="back">
        </el-page-header>
        <el-avatar shape="square" size="large" :src="squareUrl"></el-avatar>
        <div class="topicTitle">{{ row.topic_name }}</div>
        <div class="topHot">{{ row.topic_hot_number }}热度</div>
        <div class="topHot1">{{ row.topic_discussion_number }}讨论</div>
      </div>

      <el-card
        class="el-card"
        shadow="hover"
        :body-style="{ padding: '0px' }"
        v-for="(item, index) in list"
        :key="index"
      >
        <el-avatar shape="square" size="large" :src="squareUrl"></el-avatar>
        <span class="name">{{ item.user_id }}</span>
        <span class="add"
          ><i class="el-icon-location-outline"></i>{{ item.address }}</span
        >&nbsp;&nbsp;&nbsp;
        <span class="add">{{ item.topic_date }}</span>
        <el-button
          type="success"
          round
          class="btn"
          size="mini"
          @click="changePower(item)"
          >修改权限</el-button
        >
        <div class="con">
          {{ item.topic_text }}
        </div>
        <div>
          {{ item.img }}
        </div>
        <div>
          <i class="el-icon-star-off"></i>&nbsp;&nbsp;
          <div class="replay-detial" @click="replay(item)">
            <i class="el-icon-chat-line-round"></i>&nbsp;&nbsp;&nbsp;
            <span class="record" @click="replay(item)">{{
              item.topic_record_id
            }}</span>
            <span class="recordAll" @click="replay(item)"
              >全部回复&nbsp;&nbsp;</span><br /><br />
          </div>
           
          <div v-for="(items, index) in listReply" :key="index" class="replayAllType" >
           <div v-if="item.show===true">
            <el-avatar shape="circle" size="small" :src="squareUrl"></el-avatar>
            <div class="user-name">userName</div>
            <div class="replyText">{{ items.reply_text }}</div>
            <div class="replyData">{{ items.reply_date }}</div>
          </div>
         
        </div>
        </div>
       
      </el-card>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="title"
        :page-size="20"
        @prev-click="prev"
        @next-click="next"
        @current-change="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import util from '../lib/index.js';
import SujetContent from '../assets/css/SujetContent.css';
export default {
  data() {
    return {
      msg: '',
      radio: '0',
      list: [],
      row: [],
      value: '',
      dialogVisible: false,
      squareUrl:
        'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
      title: 0,
      page: 1,
      res: [],
      id: 0,
      listReply: [],
      length: 0,
      show:false
    };
  },
  methods: {
    changePower(item) {
      // console.log(item);
      this.id = item.topic_record_id;
      this.radio = item.topic_state + '';
      console.log(this.radio);
      this.dialogVisible = true;
    },
    //改状态
    changeStatus() {
      console.log(parseInt(this.radio));
      console.log(this.id);
      util
        .topicStatus({
          topic_record_id: this.id,
          topic_state: parseInt(this.radio),
        })
        .then((res) => {
          // console.log(res);
          util
            .topicAll({
              topic_id: this.row.topic_id,
              pages: 1,
            })
            .then((res) => {
              // console.log(res);
              this.list = res.data.data;
              console.log('list', this.list);
            });
        });
      this.dialogVisible = false;
    },
    //分页
    //上一页
    prev(val) {
      // console.log(val);
      this.page = parseInt(val);
      util
        .topicAll({
          topic_id: this.row.topic_id,
          pages: this.page,
        })
        .then((res) => {
          // console.log(res);
          this.list = res.data.data;
          this.title = parseInt(res.data.msg);
        });
    },
    //下一页
    next(val) {
      // console.log(val);
      this.page = parseInt(val);
      util
        .topicAll({
          topic_id: this.row.topic_id,
          pages: val,
        })
        .then((res) => {
          // console.log(res);
          this.list = res.data.data;
        });
    },
    //当前页
    currentPage(val) {
      this.page = parseInt(val);
      util
        .topicAll({
          topic_id: this.row.topic_id,
          pages: this.page,
        })
        .then((res) => {
          // console.log(res);
          this.list = res.data.data;
        });
    },
    //回复显示
    replay(item) {
      console.log('item',item);
      util
        .replayAll({
          reply_public_id:item.topic_record_id,
        })
        .then((res) => {
         this.listReply = res.data.data;
          item.show=true
          // console.log(this.listReply);
        });
  
    },
    //跳转上一级
    goBack() {
      this.$router.push({
        name: '话题',
      });
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
  mounted() {
    util
      .topicAll({
        topic_id: this.$route.params.id,
        pages: 1,
      })
      .then((res) => {
        this.list = res.data.data;
        // console.log(this.list);
        for(let i=0;i<this.list.length;i++){
          this.list[i].show=false;
        }
        this.title = parseInt(res.data.msg);
        // console.log(this.title);
      });
    this.id = this.$route.params.id;
  },
};
</script>
<style scoped>

</style>
